<template>

  <div class="app-container">

    <el-form label-width="120px">

      <el-form-item label="会议室名称">
        <el-input v-model="room.name" placeholder=" 示例：五教203"/>
      </el-form-item>

      <el-form-item label="所属类别">
        <!--        <el-input v-model="Info.kind" placeholder=" 示例：娱乐"/>-->
        <el-select v-model="room.kind" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="会议室容量">
        <el-input v-model="room.capacity" placeholder=" 示例：0"/>
      </el-form-item>

      <el-form-item label="预约次数">
        <el-input v-model="room.reserveNumber" placeholder=" 示例：0"/>
      </el-form-item>

      <el-form-item label="状态">
        <el-switch
          v-model="room.state"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </el-form-item>


      <el-form-item label="备注">
        <el-input v-model="room.describe1" placeholder=" 示例：有空调；有投影"/>
      </el-form-item>


      <el-form-item label="封面">
        <el-upload
          action="http://101.33.210.8:8005/eduoss/fileoss"
          list-type="picture-card"
          :multiple="false"
          :file-list="fileList"
          :limit="1"
          :on-preview="handlePictureCardPreview"
          :on-success="handSuccess"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>


      <br><br>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>
<script>

import room from '@/api/room'

export default {
  data() {
    return {
      editorOption: {},
      saveBtnDisabled: false,
      room: {
        name: '',
        kind: '',
        describe1: '',
        capacity: '',
        cover: '',
        reserveNumber:'',
        state:'',
        gmtCreate:'',
        gmtModified:'',
        id:'',
        isDeleted:'',
      },
      options: [
        {
          value: '五教',
          label: '五教'
        }, {
          value: '二教',
          label: '二教'
        }, {
          value: '图书馆',
          label: '图书馆'
        },
        {
          value: '大学生活动中心',
          label: '大学生活动中心'
        },
        {
          value: '19教',
          label: '19教'
        },
        {
          value: '四创中心',
          label: '四创中心'
        },
      ],
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: []
    }
  },
  created() {
    this.getById()
  },
  methods: {
    save() {
      room.update(this.room)
        .then(response => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this.$router.push({path: '/nested/menu1'})
        })
    },
    handleRemove(file, fileList) {
      this.dialogImageUrl = file.url;
      /*console.log(file, fileList);*/
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handSuccess(response) {
      this.room.cover = response.data.url;
    },
    getById() {
      room.getById(this.$route.params.id)
      .then(response=>{
        this.room = response.data.room
        this.fileList.push({
          'url': response.data.room.cover
        })
      })
    },
  }
}
</script>
<style scoped>
.tinymce-container {
  line-height: 29px;
}

.myQuillEditor {
  height: 400px;
}

</style>
